<template>
  <div>
    <Title2 title="毕业生流向城市"></Title2>
    <div class="right_center">
      <div class="right_center1">
        <div v-for="(item, index) in table" :key="index" @click="handletiao(index)">
          <img :src="item.img" alt="" />
          <p>{{ item.text }}</p>
        </div>
      </div>
      <div class="right_center2" ref="chartbox">
        <!-- <MyEearts :option="option"></MyEearts> -->
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import Title2 from '../commont/Title2.vue'
import MyEearts from '../commont/MyEearts.vue'
import { getcheng } from '../../request/index'
const tableindex = ref(0)
const chartbox = ref()
// '天津', '重庆', '江苏', '广东',
let ranking1 = `/src/assets/images/排名1.png`
let ranking2 = `/src/assets/images/排名2.png`
let ranking3 = `/src/assets/images/排名3.png`
let table = ref([
  {
    img: '/src/assets/images/设计.png',
    text: '设计'
  },
  {
    img: '/src/assets/images/开发.png',
    text: '开发'
  },
  {
    img: '/src/assets/images/元宇宙.png',
    text: '元宇宙'
  }
])
let option = ref({
  legend: {
    show: false,
    data: ['浙江', '上海', '北京'],
    icon: 'circle',
    bottom: '5%',
    textStyle: {
      color: '#333'
    }
  },
  //提示框
  tooltip: {
    trigger: 'axis',
    showDelay: 0,
    extraCssText: 'padding:15px;font-size:10px',
    // formatter: function (params) {
    //     return params[0].name + '人员总数' + ' : ' + params[0].value + ' 人' + '<br/>' + params[1].name + '工资发放金额' + ' : ' + '¥ ' + params[1].value;
    // },
    axisPointer: {
      show: true,
      type: 'shadow'
    }
  },
  grid: {
    left: '4%',
    right: '10%',
    top: '3%',
    bottom: '13%',
    containLabel: true
  },
  yAxis: [
    {
      type: 'category',
      axisLabel: {
        fontSize: '18px',
        inside: false,
        verticalAlign: 'center',
        padding: [10, 0, 0, 15],
        margin: 20, //刻度标签与轴线之间的距离
        formatter: function (value, index) {
          if (index < 4) {
            return `{b|${index + 1}}{a|${value}}`
          } else {
            return `{img${index}|} {a|${value}}`
          }
        },
        rich: {
          a: {
            fontSize: '10px',
            color: '#666666',
            fontFamily: 'SourceHanSansCN-Regular',
            padding: [4, 0, 0, 15],
            width: 10
          },
          b: {
            fontSize: '10px',
            fontFamily: 'Barlow Condensed SemiBold',
            color: '#8891B0',
            padding: [4, 15, 0, 15]
          },
          img4: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking3
            }
          },
          img5: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking2
            }
          },
          img6: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking1
            }
          }
        }
      },
      data: ['浙江', '上海', '北京'],
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      }
    }
  ],
  xAxis: [
    {
      type: 'value',
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: false // 隐藏 y 轴上的网格线
      },
      splitArea: {
        show: false // 隐藏 y 轴上的背景区域
      }
    },
    {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false // 隐藏 y 轴上的网格线
      },
      splitArea: {
        show: false // 隐藏 y 轴上的背景区域
      }
    }
  ],
  series: [
    {
      name: '配属',
      type: 'bar',

      // color: '#a3a7f4',
      xAxisIndex: 0,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#00a6fb' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#00c4db' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      label: {
        show: true,
        position: 'right',
        color: '#ccc',
        fontSize: 12,
        formatter: '{c}'
      },
      data: [1, 2, 4, 6, 8, 9, 11]
    }
  ]
})
let option1 = ref({
  legend: {
    show: false,
    data: ['天津', '重庆', '河北'],
    icon: 'circle',
    bottom: '5%',
    textStyle: {
      color: '#333'
    }
  },
  //提示框
  tooltip: {
    trigger: 'axis',
    showDelay: 0,
    extraCssText: 'padding:15px;font-size:10px',
    // formatter: function (params) {
    //     return params[0].name + '人员总数' + ' : ' + params[0].value + ' 人' + '<br/>' + params[1].name + '工资发放金额' + ' : ' + '¥ ' + params[1].value;
    // },
    axisPointer: {
      show: true,
      type: 'shadow'
    }
  },
  grid: {
    left: '4%',
    right: '10%',
    top: '3%',
    bottom: '13%',
    containLabel: true
  },
  yAxis: [
    {
      type: 'category',
      axisLabel: {
        fontSize: '18px',
        inside: false,
        verticalAlign: 'center',
        padding: [10, 0, 0, 15],
        margin: 20, //刻度标签与轴线之间的距离
        formatter: function (value, index) {
          if (index < 4) {
            return `{b|${index + 1}}{a|${value}}`
          } else {
            return `{img${index}|} {a|${value}}`
          }
        },
        rich: {
          a: {
            fontSize: '10px',
            color: '#666666',
            fontFamily: 'SourceHanSansCN-Regular',
            padding: [4, 0, 0, 15],
            width: 10
          },
          b: {
            fontSize: '10px',
            fontFamily: 'Barlow Condensed SemiBold',
            color: '#8891B0',
            padding: [4, 15, 0, 15]
          },
          img4: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking3
            }
          },
          img5: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking2
            }
          },
          img6: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking1
            }
          }
        }
      },
      data: ['天津', '重庆', '河北'],
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      }
    }
  ],
  xAxis: [
    {
      type: 'value',
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: false // 隐藏 y 轴上的网格线
      },
      splitArea: {
        show: false // 隐藏 y 轴上的背景区域
      }
    },
    {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false // 隐藏 y 轴上的网格线
      },
      splitArea: {
        show: false // 隐藏 y 轴上的背景区域
      }
    }
  ],
  series: [
    {
      name: '配属',
      type: 'bar',

      // color: '#a3a7f4',
      xAxisIndex: 0,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#00a6fb' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#00c4db' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      label: {
        show: true,
        position: 'right',
        color: '#ccc',
        fontSize: 12,
        formatter: '{c}'
      },
      data: [1, 2, 4, 6, 8, 9, 11]
    }
  ]
})
let option2 = ref({
  legend: {
    show: false,
    icon: 'circle',
    data: ['浙江', '重庆', '四川'],
    bottom: '5%',
    textStyle: {
      color: '#333'
    }
  },
  //提示框
  tooltip: {
    trigger: 'axis',
    showDelay: 0,
    extraCssText: 'padding:15px;font-size:10px',
    // formatter: function (params) {
    //     return params[0].name + '人员总数' + ' : ' + params[0].value + ' 人' + '<br/>' + params[1].name + '工资发放金额' + ' : ' + '¥ ' + params[1].value;
    // },
    axisPointer: {
      show: true,
      type: 'shadow'
    }
  },
  grid: {
    left: '4%',
    right: '10%',
    top: '3%',
    bottom: '13%',
    containLabel: true
  },
  yAxis: [
    {
      type: 'category',
      axisLabel: {
        fontSize: '18px',
        inside: false,
        verticalAlign: 'center',
        padding: [10, 0, 0, 15],
        margin: 20, //刻度标签与轴线之间的距离
        formatter: function (value, index) {
          if (index < 4) {
            return `{b|${index + 1}}{a|${value}}`
          } else {
            return `{img${index}|} {a|${value}}`
          }
        },
        rich: {
          a: {
            fontSize: '10px',
            color: '#666666',
            fontFamily: 'SourceHanSansCN-Regular',
            padding: [4, 0, 0, 15],
            width: 10
          },
          b: {
            fontSize: '10px',
            fontFamily: 'Barlow Condensed SemiBold',
            color: '#8891B0',
            padding: [4, 15, 0, 15]
          },
          img4: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking3
            }
          },
          img5: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking2
            }
          },
          img6: {
            width: 10,
            height: 10,
            backgroundColor: {
              image: ranking1
            }
          }
        }
      },
      data: ['浙江', '重庆', '四川'],
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      }
    }
  ],
  xAxis: [
    {
      type: 'value',
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: false // 隐藏 y 轴上的网格线
      },
      splitArea: {
        show: false // 隐藏 y 轴上的背景区域
      }
    },
    {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false // 隐藏 y 轴上的网格线
      },
      splitArea: {
        show: false // 隐藏 y 轴上的背景区域
      }
    }
  ],
  series: [
    {
      name: '配属',
      type: 'bar',

      // color: '#a3a7f4',
      xAxisIndex: 0,
      barWidth: 3,
      itemStyle: {
        emphasis: {
          barBorderRadius: 4
        },
        normal: {
          barBorderRadius: 4,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#00a6fb' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#00c4db' // 100% 处的颜色
              }
            ],
            false
          ),
          barBorderRadius: [0, 45, 45, 0]
        }
      },
      label: {
        show: true,
        position: 'right',
        color: '#ccc',
        fontSize: 12,
        formatter: '{c}'
      },
      data: [1, 2, 4, 6, 8, 9, 11]
    }
  ]
})
const handletiao = (index: number) => {
  console.log(index)
  tableindex.value = index
  list()
}
const list = () => {
  var myChart = echarts.init(chartbox.value)
  if (tableindex.value == 0) {
    myChart.setOption(option.value)
  } else if (tableindex.value == 1) {
    myChart.setOption(option1.value)
  } else if (tableindex.value == 2) {
    myChart.setOption(option2.value)
  }
}
onMounted(() => {
  getcheng().then((res) => {
    console.log(res)
    // const sj = res.data.data.result.slice(0, -4).sort((a, b) => a.total - b.total)

    option.value.series[0].data = res.data.data.result.map((item, index) => {
      return item.total
    })
    list()
  })
})
</script>

<style scoped lang='scss'>
.right_center {
  color: #fff;
  height: 410px;
  margin-top: 15px;
  background: #0c1d5f;
}
.right_center1 {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.right_center1 > div {
  width: 120px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(to bottom, #8411ff, #2a1d97);
  color: #fff;
}
.right_center2 {
  width: 100%;
  height: 300px;
}
</style>